<template name="loan">
  <form @submit="calculationLoan" @reset="resetLoan">
    <view class="body">
      <view class="list">
        <view class="title">是否三年内未提取</view>
        <view class="right">
          <picker name="threeYearsUnextracted" @change="unextractedYears" mode="selector" :range="booleanType">
            <text class="value">{{booleanType[unextractedIndex]}}</text>
          </picker>
          <image src="/static/images/sys/right.png" class="list-arrow"></image>
        </view>
      </view>
      <view class="list">
        <view class="title">是否有共同申请人</view>
        <view class="right">
          <picker name="jointApplicant" @change="jointApplicant" mode="selector" :range="booleanType">
            <text class="value">{{booleanType[jointApplicantIndex]}}</text>
          </picker>
          <image src="/static/images/sys/right.png" class="list-arrow"></image>
        </view>
      </view>
    </view>
    <view class="border">
      <view class="list">
        <view class="title">公积金余额</view>
        <view class="right">
          <input name="balance" placeholder="请输入公积金余额" placeholder-class="input-placeholder" type="number">
        </view>
      </view>
      <view class="list" v-if="jointApplicantIndex == 0">
        <view class="title">配偶公积金余额</view>
        <view class="right">
          <input name="spouseBalance" placeholder="请输入配偶公积金余额" placeholder-class="input-placeholder" type="number">
        </view>
      </view>
    </view>
    <view class="control-group">
      <button form-type="reset" class="reset" hover-class="btn">清空</button>
      <button form-type="submit" class="submit" hover-class="btn">开始计算</button>
    </view>
  </form>
  <view class="loan-result">
    <view class="rseult-border">
      <view class="result-title">可贷款总额（元）</view>
      <view class="number">{{result}}</view>
    </view>
    <view class="desc">结果仅供参考，最终结果以正式审批为准。</view>
  </view>
</template>